<template>
  <div id="app">
    <div class="content">
      <div class="title">
        <h2>留  言  板</h2>
        <h4>提交 bug， 学术交流，水贴和臊皮的地方</h4>
      </div>
      <div id="refer">
        <div>
          <i class="el-icon-circle-plus-outline emoji" @click="emoji()"></i>
        </div>
        <el-divider class="divider"></el-divider>
        <el-input 
          v-model="input" 
          class="input" 
          maxlength="255" 
          show-word-limit 
          type="textarea"
          rows="7"
          resize="none">
        </el-input>
      </div>
      <el-button type="primary" class="submit" @click="submit()" :loading="loading" :disabled="!this.disabled"><span class="submit-span">{{ this.disabled ? '提交留言' : '请先登录'}}</span></el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "leavemsgIndex",
  data() {
    return {
      input: "",
      disabled: this.$cookies.isKey("CookieId"),
      loading: false
    }
  },
  components: {},
  methods: {
    emoji() {
      this.$message.info("功能未完成")
    },
    submit() {
      if(this.input != "") {
        this.loading = true
        this.axios.post('http://www.liujn.top/bbs/api/message/fathouse', {
          name: this.$cookies.get("UserName"),
          text: this.input,
          userAvatar: this.$cookies.get("UserAvatar")
        }).then((res) => {
          if(res.data == "-1") {
            this.$message.error('提交失败')
          } else if (res.data == "0") {
            this.$message({
              message: '留言成功',
              type: "success",
              offset: 50
            }),
            this.input = ""
            this.loading = false
            this.$parent.getList()
          } else {
            this.$message.error('未知错误')
          }
        })
      } else {
        this.$message.error("请输入内容哈~")
      }
    }
  },
};
</script>

<style scoped>
.content {
  width: 80%;
  height: 350px;
  background-color: #fff;
  margin: 10px auto 20px auto;
}

.title h2 {
  
  padding-top: 15px;
  margin-bottom: 5px;
}
.title h4 {
  color: #999;
  margin-bottom: 10px;
}

#refer {
  border: 1px solid #DCDFE6;
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

div /deep/.el-textarea__inner {
  border: 1px solid #dcdfe600;
}

.emoji {
  font-size: 26px;
  color: #999;
  margin: 3px auto 3px 5px;
}

.emoji:hover {
  cursor: pointer
}

.divider {
  margin: 0px;
}

.submit {
  display: flex;
  margin: 10px auto 0px 5%;
  height: 40px;
  width: 100px;
  color: #111;
}

.submit-span {
  color: #fff;
  line-height: 40px;
  margin-left: 20px;
  font-weight: bold;
}

* {
  margin: 0px;
  padding: 0px;
}

@media screen and (max-width: 768px) {
  .content {
    width: 94%;
    height: 350px;
    background-color: #fff;
    margin: 10px auto 20px auto;
  }
}
</style>